feat(dl): column resizing (#DS-4609) - #1895

Visit the preview URL for this PR (updated for commit d368bc6):

https://koobiq-next--prs-1895-7uegobeu.web.app

_{(expires Fri, 28 Aug 2026 13:36:46 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

Пример нужно изменить, чтобы минимальная ширина и ширина по умолчанию отличались. Нужен пример, который наглядно покажет, как по двойному клику меняется ширина. Минимальную ширину сделать в районе 100px.

Нужен пример, где ширина меняется между несколькими списками DL. В продуктах есть кейс, где списки располагаются внутри аккордеонов.

Сделал макет примера
https://www.figma.com/design/wHiyNIQkBkoomLDLEJEecV/%F0%9F%9F%A5-koobiq-%C2%B7-components-20?node-id=69105-9008&t=poyCPRQTAKSItvm3-4

По обработке курсоров есть несоответствие гайду. В разделе «Курсор» указано, что курсор должен показывать не только возможность изменения размера (col-resize), но и доступное направление: e-resize при минимальной ширине панели, w-resize при максимальной, default, если изменить размер невозможно.

Сейчас в kbq-dl всегда передаётся cursor="col-resize", поэтому при достижении min/max пользователь не получает обратной связи. Предлагаю вычислять курсор на основе текущей ширины и ограничений, обновлять его во время drag и учитывать RTL.

В момент перетаскивания полоска должна становиться толстой. На стилизацию состояния Focus тоже надо обратить внимание

https://www.figma.com/design/wHiyNIQkBkoomLDLEJEecV/%F0%9F%9F%A5-koobiq-%C2%B7-components-20?node-id=68743-15136&t=poyCPRQTAKSItvm3-4

появление рамки фокуса должно быть без анимации, мгновенно

dl.scss:104–107: hover-эффект не учитывает тип устройства

Полезно ограничить появление линии при наведении @media (hover: hover) and (pointer: fine). На touch-устройствах :hover может срабатывать после касания и оставлять линию видимой после завершения взаимодействия.

Нужен пример, где ширина меняется между несколькими списками DL

добавил пример с двумя списками

По обработке курсоров есть несоответствие гайду. В разделе «Курсор» указано, что курсор должен показывать не только возможность изменения размера (col-resize), но и доступное направление: e-resize при минимальной ширине панели, w-resize при максимальной, default, если изменить размер невозможно.

Сейчас в kbq-dl всегда передаётся cursor="col-resize", поэтому при достижении min/max пользователь не получает обратной связи. Предлагаю вычислять курсор на основе текущей ширины и ограничений, обновлять его во время drag и учитывать RTL.

поправил

1. двойной клик → колонка стала уже
2. двойной клик → колонка вернулась к дефолтной ширине, стала шире.
3. cursor стал e-resize

Ожидаю, что курсор будет col-resize, тк колонку можно сделать как более узкой, так и расширить

Фокус на полоске. Вокруг полоски видна рамка. Начал тянуть: вижу рамку и синюю полоску. Взаимодействие идет мышкой: ожидаю, что рамка скроется. Будет полоска синего цвета в момент перетаскивания

Фокус на полоске. Вокруг полоски видна рамка. Начал тянуть: вижу рамку и синюю полоску. Взаимодействие идет мышкой: ожидаю, что рамка скроется. Будет полоска синего цвета в момент перетаскивания

после фокуса с клавиатуры в момент перетаскивания фокус сохраняется, поэтому и рамку видно, можно програмно принудительно скрывать рамку при перетаскивании, но как быть при перетаскивании стрелками? в этот момент фокус должен быть виден?

upd. скрыл рамку в момент перетаскивания мышью

Ожидаю, что курсор будет ew-resize, тк колонка можно сделать как более узкой, так и расширить

баг, поправлю

Ожидаю, что курсор будет ew-resize, тк колонка можно сделать как более узкой, так и расширить

баг, поправлю

я имел в виду col-resize — ранее я неправильно написал

Фокус на полоске. Вокруг полоски видна рамка. Начал тянуть: вижу рамку и синюю полоску. Взаимодействие идет мышкой: ожидаю, что рамка скроется. Будет полоска синего цвета в момент перетаскивания

после фокуса с клавиатуры в момент перетаскивания фокус сохраняется, поэтому и рамку видно, можно програмно принудительно скрывать рамку при перетаскивании, но как быть при перетаскивании стрелками? в этот момент фокус должен быть виден?

upd. скрыл рамку в момент перетаскивания мышью

Я вижу поведение так: рамка показывает клавиатурное управление. Сам фокус снимать не нужно.

1. Клавиатурный фокус на полоске-разелителе — рамка видна.
2. Ресайз мышью — рамка скрыта, а полоска толстая и синяя.
3. Ресайз стрелками — рамка видна.
4. Tab — рамка на полоске скрыта, на новом элементе показана.
5. Ресайз полоски мышью — рамки нет, линия жирная и синяя.
6. Tab — фокус на сл. элементе, его рамка видна.
7. Shift+Tab — фокус возвращается на полоску, рамка снова видна.

Мышка — синяя полоска без рамки, клавиатура — полоска с рамкой.
Что думаешь? Понятно рассказал?

я имел в виду col-resize — ранее я неправильно написал

поправил

Я вижу поведение так: рамка показывает клавиатурное управление. Сам фокус снимать не нужно.

1. Клавиатурный фокус на полоске-разелителе — рамка видна.
2. Ресайз мышью — рамка скрыта, а полоска толстая и синяя.
3. Ресайз стрелками — рамка видна.
4. Tab — рамка на полоске скрыта, на новом элементе показана.
5. Ресайз полоски мышью — рамки нет, линия жирная и синяя.
6. Tab — фокус на сл. элементе, его рамка видна.
7. Shift+Tab — фокус возвращается на полоску, рамка снова видна.

Мышка — синяя полоска без рамки, клавиатура — полоска с рамкой.

готово

Заметил некорректное изменение курсора при ресайзе: когда колонка достигает минимальной или максимальной ширины и дальше уже не меняется, курсор сбрасывается на default.

Я изучил поведение в macOS и веб-приложении Figma: пока пользователь удерживает кнопку мыши и продолжает drag, курсор остаётся связанным с ресайзом, даже если достигнут предел. Это логично: жест ещё не завершён, а колонку можно сразу потянуть в обратную сторону.

Затем я обратился к ИИ. Его вывод:

Во время активного drag не стоит переключать курсор на default только потому, что колонка достигла min или max. Базовый контракт — сохранять resize-курсор до pointerup / pointercancel.

На границе можно показывать доступное направление через e-resize / w-resize, но default уместен только когда ресайз полностью недоступен в обе стороны.

Курсор нужно задавать не только на handle. Когда ручка упирается в предел, она перестаёт двигаться, а указатель может выйти из её hit-area — тогда браузер показывает курсор нижележащего элемента. На время drag cursor следует устанавливать на общий контейнер или document.body и сбрасывать при завершении жеста.

Нужно доработать это поведение и покрыть тестами сценарии: достижение min/max, дальнейшее движение указателя за ручку, возврат в доступный диапазон и сброс cursor после завершения drag.

Записал видос про смену курсора

Вот еще про ховеры на другие элементы при ресайзе. Это типа то же самое, что я Лёне говорил в PR про list drag-sort #1911 (comment)

Думаю, что это можно отдельно доработать

Во время активного ресайза другие элементы не должны реагировать на hover: ни подсветка кнопок, ни тултипы, ни pointer-курсор.
Нужен глобальный прозрачный drag-shield поверх viewport:

• появляется на pointerdown;
• имеет cursor: col-resize или направленный e/w-resize;
• перехватывает hit-testing, поэтому кнопка под курсором не получает :hover и клики;
• убирается на pointerup, pointercancel, blur и при уничтожении компонента.
  Одного document.body.style.cursor недостаточно: курсор сохранится, но CSS :hover на кнопке под указателем всё равно сработает.
  Фокус клавиатуры при этом не снимаем: shield нужен только для pointer-drag.

Я вижу поведение так: рамка показывает клавиатурное управление. Сам фокус снимать не нужно.

1. Клавиатурный фокус на полоске-разелителе — рамка видна.
2. Ресайз мышью — рамка скрыта, а полоска толстая и синяя.
3. Ресайз стрелками — рамка видна.
4. Tab — рамка на полоске скрыта, на новом элементе показана.
5. Ресайз полоски мышью — рамки нет, линия жирная и синяя.
6. Tab — фокус на сл. элементе, его рамка видна.
7. Shift+Tab — фокус возвращается на полоску, рамка снова видна.

Мышка — синяя полоска без рамки, клавиатура — полоска с рамкой.

готово

После ресайза мышкой не должно остаться видимой рамки

• убраны избыточные уточнения про горизонтальный режим: понятие колонок не оставляет разночтений;
• убраны шорткаты и дополнительные сценарии взаимодействия, поскольку они будут общими для всех сплиттеров;
• подробнее описано назначение привязки [(dtWidth)];
• раздел про изменение ширины перемещен в конец статьи как описание дополнительной возможности.

Вот еще про ховеры на другие элементы при ресайзе. Это типа то же самое, что я Лёне говорил в PR про list drag-sort #1911 (comment)

Думаю, что это можно отдельно доработать

создал отдельную задачу DS-5463

Заметил некорректное изменение курсора при ресайзе: когда колонка достигает минимальной или максимальной ширины и дальше уже не меняется, курсор сбрасывается на default.

поправил

После ресайза мышкой не должно остаться видимой рамки

поправил

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.